<template>
<div id="MyData">
  <template v-if="$store.state.userInfo.roleType == 3">
    <div style="height: 1rem; line-height: 1rem; text-align: center; font-size: 0.3rem; color: #4d4d4d; margin-top: 0.2rem;"></div>
    <div style="height: 1rem; line-height: 1rem; text-align: center; font-size: 0.3rem; color: #f6712e; font-size: 0.9rem;">{{ totalRevenue }}</div>
    <div style="height: 0.6rem; line-height: 0.6rem; text-align: center; font-size: 0.3rem; color: #4d4d4d; font-size: 0.24rem; margin-top: 0.2rem;">总收盈(元)</div>
  </template>
  <template v-else>
    <div @click="showBlank()" style="height: 1rem; line-height: 1rem; text-align: center; font-size: 0.3rem; color: #4d4d4d; margin-top: 0.2rem;">{{ date }}</div>
    <div style="height: 1rem; line-height: 1rem; text-align: center; font-size: 0.3rem; color: #f6712e; font-size: 0.9rem;">{{ totalIncome }}</div>
    <div style="height: 0.6rem; line-height: 0.6rem; text-align: center; font-size: 0.3rem; color: #4d4d4d; font-size: 0.24rem; margin-top: 0.2rem;">总流水(元)</div>
  </template>
  <div class="liushui-box">
    <div class="liushui-item" v-for="item in liushui" :key="item.key">
      <div class="liushui-title">{{ item.value }}</div>
      <div class="liushui-text">{{ item.name }}</div>
    </div>
  </div>

  <div v-if="$store.state.userInfo.roleType == 2" style="line-height: 0.6rem; text-align: center; font-size: 0.6rem; color: #4d4d4d; font-size: 0.24rem; margin-top: 0.2rem;">总订单统计</div>  
  <div class="liushui-box" v-if="$store.state.userInfo.roleType == 2">
    <div class="liushui-item">
      <div class="liushui-title">{{ status.rentingNum || 0 }}</div>
      <div class="liushui-text">进行中订单</div>
    </div>
    <div class="liushui-item">
      <div class="liushui-title">{{ status.returnedNum || 0 }}</div>
      <div class="liushui-text">已归还订单</div>
    </div>
    <div class="liushui-item">
      <div class="liushui-title">{{ status.canceledNum || 0 }}</div>
      <div class="liushui-text">已取消订单</div>
    </div>
  </div>

  <div style="height: 0.2rem; background: #F7F7F7;" v-if="$store.state.userInfo.roleType != 3"></div>
  <div class="shebei-box" v-if="$store.state.userInfo.roleType < 3">
    <div class="shebei-item" v-for="item in shebei" :key="item.icon" @click="clickShebei( item.key )">
      <img :src="`./static/img/${ item.icon }.png`" class="icon-img"/>
      <div class="text-box">
        <div class="text-title" :style="`color: ${ item.color }`">{{ item.value }}</div>
        <div class="text-text">{{ item.name }}</div>
      </div>
    </div>
  </div>
  <van-popup v-model="riqi.show" position="bottom">
    <van-datetime-picker v-model="riqi.value" type="date" :formatter="formatter" @cancel="riqi.show = false" @confirm="changeDate"/>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
import { formatDate } from '@/utils/common';

@Component
export default class MyData extends Vue {

  totalRevenue: any = 0;
  totalIncome: any = 0;
  status: any = [];

  date: any = formatDate(new Date(), 'yyyy-MM-dd');
  riqi: any = {
    value: new Date(),
    show: false
  }
  showBlank() {
    this.riqi.value = new Date( this.date );
    this.riqi.show = true;
  }
  changeDate(date: any) {
    this.date = formatDate(date, 'yyyy-MM-dd');
    this.riqi.show = false;
    this.getLiushui();
  }
  formatter(type: string, value: any) {
    let nameJson: any = { year: '年', month: '月', day: '日' };
    return value + nameJson[ type ];
  }

  liushui: Array<any> = [
    { 
      name: '实际分成(元)', 
      value: 0, 
      key: 'realIncome',
      showType: [ 0, 1 ]
    },
    { 
      name: '微信流水(元)', 
      value: 0, 
      key: 'wxIncome',
      showType: [ 0, 1 ]
    },
    { 
      name: '支付宝流水(元)', 
      value: 0, 
      key: 'zfbIncome',
      showType: [ 0, 1 ]
    },
    { 
      name: '总支付订单', 
      value: 0, 
      key: 'totalOrderNum',
      showType: [ 0, 1, 2 ]
    },
    { 
      name: '微信支付订单', 
      value: 0, 
      key: 'wxOrderNum',
      showType: [ 0, 1, 2 ] 
    },
    { 
      name: '支付宝支付订单', 
      value: 0, 
      key: 'zfbOrderNum',
      showType: [ 0, 1, 2 ] 
    },
    { 
      name: '商户(人)', 
      value: 0, 
      key: 'shopAdminSum',
      showType: [ 0, 1, 2 ]  
    },
    { 
      name: '代理(人)', 
      value: 0, 
      key: 'agencySum',
      showType: [ 0 ]  
    },
    { 
      name: '业务员(人)', 
      value: 0, 
      key: 'salesmanSum',
      showType: [ 0, 1 ]  
    }
  ]
  getLiushui() {
    let userId = this.$store.state.userInfo.userId, date = this.date;
    this.liushui = this.liushui.filter((item: any) => item.showType.indexOf( this.$store.state.userInfo.roleType ) > -1);
    axios.get('/api/orderFormController/incomeInfo', { userId, date }).then((res: any) => {
      let json = res || {};
      this.liushui.forEach((ele: any) => { if(json[ ele.key ]) ele.value = json[ ele.key ] || 0 });
      this.totalIncome = json.totalIncome || 0;
    });
  }

  shebei: Array<any> = [
    {
      name: '微信租借次数',
      icon: 's1',
      value: '0',
      key: 'wxNum',
      color: 'rgb(45, 206, 143)'
    },
    {
      name: '支付宝租借次数',
      icon: 's2',
      key: 'zfbNum',
      value: '0',
      color: 'rgb(24, 163, 220)'
    },
    {
      name: '在线设备',
      icon: 's3',
      key: 'onLines',
      value: '0',
      color: 'rgb(244, 181, 49)'
    },
    {
      name: '离线设备',
      icon: 's4',
      key: 'offLine',
      value: '0',
      color: 'rgb(131, 125, 249)'
    },
    {
      name: '总设备',
      icon: 's5',
      key: 'allShebei',
      value: '0',
      color: 'rgb(244, 134, 78)'
    },
    {
      name: '未绑定设备',
      icon: 's6',
      key: 'notBinding',
      value: '0',
      color: 'rgb(24, 163, 220)'
    },
    {
      name: '故障设备',
      icon: 's7',
      key: 'fault',
      value: '0',
      color: 'rgb(255, 84, 84)'
    },
  ]
  getShebei() {
    let userId = this.$store.state.userInfo.userId;
    axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', { userId }).then((res: any) => {
      let json = res || {};
      if(json.allLevelUserCaseModel){ json = { ...json, ...json.allLevelUserCaseModel } }
      json.allShebei = json.onLines + json.offLine;
      this.shebei.forEach((ele: any) => ele.value = json[ ele.key ] || 0);
      this.liushui.forEach((ele: any) => { if(json[ ele.key ]) ele.value = json[ ele.key ]; });
      this.totalRevenue = json.totalRevenue || 0;
    });
  }
  clickShebei(key: any) {
    switch( key ){
      case 'onLines':
        this.$router.push({ name: 'Equipment', query: { active: '0' } });
      break;
      case 'offLine':
        this.$router.push({ name: 'Equipment', query: { active: '1' } });
      break;
      case 'allShebei':
        this.$router.push({ name: 'Equipment', query: { active: '0' } });
      break;
      case 'notBinding':
        this.$router.push({ name: 'Equipment', query: { active: '3' } });
      break;
      case 'fault':
        this.$router.push({ name: 'Equipment', query: { active: '4' } });
      break;
    }
  }

  mounted() {
    this.getShebei();
    this.getLiushui();
    if( this.$store.state.userInfo.roleType == 2 ) {
      let userId = this.$store.state.userInfo.userId;
      axios.get('/api/orderFormController/salesmanOrderStatics', { userId }).then((res: any) => {
        this.status = res || {};
      });
    }
  }
  
};
</script>

<style lang="scss">
#MyData {
  .liushui-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    .liushui-item {
      width: 33%;
      height: 1.2rem;
      text-align: center;
      line-height: 0.4rem;
      .liushui-title {
        font-size: 0.36rem;
        color: #18a3dc;
        font-weight: 600;
      }
      .liushui-text {
        font-size: 0.24rem;
        color: #4d4d4d;
      }
    }
  }
  .shebei-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.26rem 0;
    .shebei-item {
      width: 50%;
      height: 1.4rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .icon-img {
        width: 0.6rem;
        margin-left: 0.5rem;
      }
      .text-box {
        width: 2rem;
        height: 1.1rem;
        .text-title {
          font-size: 0.42rem;
          font-weight: 600;
          margin-top: 0.06rem;
        }
        .text-text {
          font-size: 0.24rem;
        }
      }
    }
  }
}
</style>

